<template>
    <myx-table

               :data="data"
               :tableAttr="tableAttr"
               :column="columns"
               :tableLoading="tableLoading">
        <template #tableCell="{ scope }">
            <div v-if="scope.column.key == 'status'">
                <el-switch
                           v-model="scope.row.status"
                           active-text="启用"
                           inactive-text="禁用"
                           active-value="1"
                           inline-prompt
                           deactive-value="">

                </el-switch>
            </div>
            <div v-if="scope.column.key == 'update_at'">
                <el-tag>
                    {{ scope.row.update_at ? scope.row.update_at : '暂无' }}
                </el-tag>
            </div>
        </template>
    </myx-table>
</template>
<script setup>

//表格的属性

let tableAttr = {
    rowkey: row => row.menu_id,
    height: 500,
    headerCellStyle: {
        background: 'var(--theme-bg)',
        color: '#fff'
    },
    border: true
}


let data = ref([])

let columns = ref([

    {
        key: 'name',
        dataIndex: 'name',
        align: 'center',
        label: '菜单名称'
    },
    {
        key: "title",
        dataIndex: 'title',
        label: '标识',
        align: 'center'
    },
    {
        key: 'status',
        dataIndex: 'status',
        label: '菜单状态',
        align: 'center',
        tableCell: true
    },
    {
        key: 'menu_id',
        dataIndex: 'menu_id',
        align: 'center',
        label: '菜单编号'
    },
    {
        key: 'create_at',
        label: '创建时间',
        dataIndex: 'create_at',
        align: 'center'
    },
    {
        key: 'update_at',
        dataIndex: "update_at",
        label: '更新时间',
        align: 'center',
        tableCell: true
    }
])

let tableLoading = ref(false)

let getMenus = async () => {
    tableLoading.value = true;
    try {
        let res = await api.getMenusApi()
        tableLoading.value = false
        data.value = res.data
    } catch (e) {
        ElMessage.error(e.toString())
    }
}
onMounted(() => {
    getMenus()
})
</script>

<script>
export default {
    name: 'menus',
    meta: {
        name: "菜单管理",
        icon: "icon-caidanguanli1"
    }
}
</script>